<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Horizontal Scrolling DIV demo on iPhone / iPod Touch / Android / iPad</title>

<script type="text/javascript" src="../../src/iscroll.js?v3.7.1"></script>

<script type="text/javascript">
var myScroll;

function setHeight() {
	var headerH = document.getElementById('header').offsetHeight;
	var wrapperH = window.innerHeight - headerH;
	document.getElementById('wrapper').style.height = wrapperH + 'px';
}

function loaded() {
	setHeight();
	myScroll = new iScroll('scroller',{bounceLock:true});
}

window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);
document.addEventListener('touchstart', function(e){ e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

<style type="text/css" media="all">
body,ul,li {
	padding:0;
	margin:0;
}

body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
/*	-webkit-box-sizing:border-box;*/
	font-family:helvetica;
/*	padding-bottom:45px;	/*	This prevents the scroller to lock if the user swipes down outside of the screen.
							 	NOT needed if in home screen mode. */
}

#header {
	width:100%;
	height:45px;
	line-height:45px;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;
}

#header a {
	color:#f3f3f3;
	text-decoration:none;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#wrapper {
	height:200px;		/* Of course you need to specify the object height */

	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */

	width:100%;
	background:#aaa;
/*	background:#aaa url(wrapper-bg.png);*/
}

#scroller {
/*	-webkit-touch-callout:none;*/
/*	-webkit-tap-highlight-color:rgba(0,0,0,0);*/
	width:2040px;
	height:100%;
	float:left;
	padding:0;
	
/*	-webkit-box-shadow:0 0 8px #555;	/* Don't use shadows in production, they slow down drastically CSS animations */
}

#scroller ul {
	list-style:none;
	display:block;
	float:left;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	text-align:left;
}

#scroller li {
	display:block;
	vertical-align:middle;
	float:left;
	padding:0 10px;
	width:80px;
	height:100%;
	border-left:1px solid #ccc;
	border-right:1px solid #fff;
	background-color:#fafafa;
/*	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d4d4d4), to(#fafafa));*/
	font-size:14px;
}
</style>
</head>
<body>
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>

<div id="wrapper">
	<div id="scroller">
		<ul id="thelist">
			<li>Pretty col 1</li>
			<li>Pretty col 2</li>
			<li>Pretty col 3</li>
			<li>Pretty col 4</li>
			<li>Pretty col 5</li>
			<li>Pretty col 6</li>
			<li>Pretty col 7</li>
			<li>Pretty col 8</li>
			<li>Pretty col 9</li>
			<li>Pretty col 10</li>
			<li>Pretty col 11</li>
			<li>Pretty col 12</li>
			<li>Pretty col 13</li>
			<li>Pretty col 14</li>
			<li>Pretty col 15</li>
			<li>Pretty col 16</li>
			<li>Pretty col 17</li>
			<li>Pretty col 18</li>
			<li>Pretty col 19</li>
			<li>Pretty col 20</li>
		</ul>
	</div>
</div>

</body>
</html>